<template>
    <div class="h-full p-4">
        <div class="flex justify-end mb-4">
            <button @click="isEditing = !isEditing" class="px-4 py-2 bg-blue-500 text-white rounded">
                {{ isEditing ? '保存' : '编辑' }} 
            </button>
        </div>

        <div class="space-y-4">
            <div class="flex items-center">
                <div class="w-32 text-right pr-4">预警标题：</div>
                <div v-if="!isEditing" class="flex-1">{{ formData.warningTitle }}</div>
                <input v-else v-model="formData.warningTitle" class="flex-1 border rounded px-2 py-1" />
            </div>

            <div class="flex items-center">
                <div class="w-32 text-right pr-4">发生时间：</div>
                <div v-if="!isEditing" class="flex-1">{{ formData.eventTime }}</div>
                <input v-else v-model="formData.eventTime" class="flex-1 border rounded px-2 py-1" />
            </div>

            <div class="flex items-center">
                <div class="w-32 text-right pr-4">关联企业：</div>
                <div v-if="!isEditing" class="flex-1">{{ formData.relatedCompany }}</div>
                <input v-else v-model="formData.relatedCompany" class="flex-1 border rounded px-2 py-1" />
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { ref, reactive } from 'vue'

const isEditing = ref(false)
const formData = reactive({
    warningTitle: '示例预警标题',
    eventTime: '2025-04-27 10:00:00',
    relatedCompany: '示例企业名称'
})
</script>
    
<style scoped>
.w-32 {
    width: 8rem;
}
</style>